<template>
  <div
    class="gift fixed z-50 bottom-0 right-0 bg-white footer-shadow flex justify-between items-center"
    :class="{ 'sider-breakpoint': siderBreakpoint }"
  >
    <div></div>
    <div class="gift-wrapper">
      <span class="total-price">总价：{{ totalPrice }}</span>
      <a-button type="primary" size="large" :disabled="sold" class="ml-5 gift__submit-btn" @click="handleSubmit">
        {{ btnText }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts" setup name="BwFooter">
import { useMainStore } from '@/store/useMainStore'
import { storeToRefs } from 'pinia'

interface Props {
  sold?: boolean
  totalPrice: number | string
  btnText: string
}

interface Emits {
  (e: 'submit'): void
}

withDefaults(defineProps<Props>(), {
  sold: false,
  totalPrice: '--',
  btnText: ''
})

const emit = defineEmits<Emits>()
const mainStore = useMainStore()
const { siderBreakpoint } = storeToRefs(mainStore)

function handleSubmit() {
  emit('submit')
}
</script>

<style lang="scss" scoped>
.footer-shadow {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.gift {
  height: 85px;
  left: 208px;
  padding: 0 42px 0 18px;
  transition: left 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 0;
  }

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  &__submit-btn {
    height: 56px;
    min-width: 134px;
    border-radius: 4px;
    font-size: 20px;
  }
}

.total-price {
  vertical-align: sub;
  font-size: 26px;
  font-weight: bold;
  color: #ff4d4f;
}

.sider-breakpoint {
  left: 48px;
}
</style>
